<template>
  <page-layout :title="headContent.materialName"
               :logo="logo"
               :show-breadcrumb="false">
    <yq-page-head-content ref="pageContent" slot="headerContent" :head-content="headContent" :head-content-columns="headContentColumns"/>
    <yq-page-head-extra ref="pageExtra" slot="extra" :head-content="headContent" :head-extra-columns="headExtraColumns"/>
    <a-divider style="margin: 1px"/>
    <a-divider style="margin: 1px"/>
    <!-- actions -->
<!--    <template slot="action">-->
<!--      <a-button-group style=" margin-right: 4px;">-->
<!--        <a-button @click="handleEdit(headContent)">编辑</a-button>-->
<!--        <a-button>-->
<!--          <a-dropdown :trigger="['click']">-->
<!--            <a class="ant-dropdown-link">-->
<!--              <a-icon type="ellipsis"/>-->
<!--            </a>-->
<!--            <a-menu slot="overlay">-->
<!--              <a-menu-item>-->
<!--                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(headContent.id)">-->
<!--                  <a>删除</a>-->
<!--                </a-popconfirm>-->
<!--              </a-menu-item>-->
<!--            </a-menu>-->
<!--          </a-dropdown>-->
<!--        </a-button>-->
<!--      </a-button-group>-->
<!--      <template>-->
<!--        <a-button type="primary" @click="">变更状态</a-button>-->
<!--      </template>-->
<!--    </template>-->
    <a-tabs type="card" @change="callback">
      <a-tab-pane key="1" tab="详细资料" >
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}">
          <detail-list title="┃ 基本信息" size="small" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="物料号">{{headContent.materialCode}}</detail-list-item>
            <detail-list-item term="名称">{{headContent.materialName}}</detail-list-item>
            <detail-list-item term="物料类型">{{headContent.materialTypeId_dictText}}</detail-list-item>
            <detail-list-item term="物料分类">{{headContent.materialClassId_dictText}}</detail-list-item>
            <detail-list-item term="物料来源">{{headContent.materialSourceCode_dictText}}</detail-list-item>
            <detail-list-item term="单位">{{headContent.materialUnitCode_dictText}}</detail-list-item>
            <detail-list-item term="规格">{{headContent.materialSpec}}</detail-list-item>
            <detail-list-item term="材质">{{headContent.materialMaterial}}</detail-list-item>
            <detail-list-item term="生产厂家">{{headContent.materialFactory}}</detail-list-item>
            <detail-list-item term="属性组">{{headContent.materialFactory_dictText}}</detail-list-item>
            <detail-list-item term="属性">{{headContent.materialProp_dictText}}</detail-list-item>
            <detail-list-item term="图号">{{headContent.materialGraphNo}}</detail-list-item>
            <detail-list-item term="产地">{{headContent.materialGraphNo}}</detail-list-item>
            <detail-list-item term="旧物料号">{{headContent.oldMaterialCode}}</detail-list-item>
            <detail-list-item term="启用标志">{{headContent.enableFlag_dictText}}</detail-list-item>
            <detail-list-item term="备注">{{headContent.remark}}</detail-list-item>
          </detail-list>
          <detail-list title="┃ 其他信息" size="small" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="品牌">{{headContent.materialBrand}}</detail-list-item>
            <detail-list-item term="宽度">{{headContent.materialWidth}}</detail-list-item>
            <detail-list-item term="厚度">{{headContent.materialThickness}}</detail-list-item>
            <detail-list-item term="旧物料名称">{{headContent.oldMaterialName}}</detail-list-item>
            <detail-list-item term="辅助单位">{{headContent.auxiliaryUnitCode_dictText}}</detail-list-item>
            <detail-list-item term="长度">{{headContent.materialLength}}</detail-list-item>
            <detail-list-item term="净重">{{headContent.materialNetWeight}}</detail-list-item>
            <detail-list-item term="颜色">{{headContent.materialColor}}</detail-list-item>
            <detail-list-item term="毛重">{{headContent.materialGrossWeight}}</detail-list-item>
            <detail-list-item term="重量单位">{{headContent.weighUnitCode_dictText}}</detail-list-item>
            <detail-list-item term="面积">{{headContent.materialArea}}</detail-list-item>
            <detail-list-item term="体积">{{headContent.materialVolume}}</detail-list-item>
            <detail-list-item term="体积单位">{{headContent.volumeUnitCode_dictText}}</detail-list-item>
            <detail-list-item term="物料状态">{{headContent.materialStatusCode_dictText}}</detail-list-item>
            <detail-list-item term="销售标志">{{headContent.materialSaleFlag_dictText}}</detail-list-item>
            <detail-list-item term="出入库策略">{{headContent.inoutStrategyCode_dictText}}</detail-list-item>
            <detail-list-item term="生产仓库">{{headContent.productionStockId_dictText}}</detail-list-item>
            <detail-list-item term="采购仓库">{{headContent.buyStockId_dictText}}</detail-list-item>
            <detail-list-item term="生效日期">{{headContent.materialEffectiveDate}}</detail-list-item>
            <detail-list-item term="失效日期">{{headContent.materialExpiryDate}}</detail-list-item>
            <detail-list-item term="采购组织">{{headContent.purDeptId_dictText}}</detail-list-item>
            <detail-list-item term="采购员">{{headContent.materialBuyerId_dictText}}</detail-list-item>
            <detail-list-item term="批次标志">{{headContent.materialBatchFlag_dictText}}</detail-list-item>
            <detail-list-item term="自动采购标志">{{headContent.materialBuyFlag_dictText}}</detail-list-item>
            <detail-list-item term="ABC标识">{{headContent.materialAbcFlag_dictText}}</detail-list-item>
            <detail-list-item term="计划员">{{headContent.materialPlannerId_dictText}}</detail-list-item>
            <detail-list-item term="批量">{{headContent.batchTypeId_dictText}}</detail-list-item>
            <detail-list-item term="最小批量">{{headContent.materialMinimum}}</detail-list-item>
            <detail-list-item term="最大批量">{{headContent.materialMaximum}}</detail-list-item>
            <detail-list-item term="固定批量">{{headContent.materialFixed}}</detail-list-item>
            <detail-list-item term="安全库存">{{headContent.materialSafeStock}}</detail-list-item>
            <detail-list-item term="反冲标志">{{headContent.materialBackFlag_dictText}}</detail-list-item>
            <detail-list-item term="自制生产（天）">{{headContent.productionDays}}</detail-list-item>
            <detail-list-item term="计划交货时间（天）">{{headContent.deliveryDays}}</detail-list-item>
            <detail-list-item term="收货处理时间（天）">{{headContent.receiveDays}}</detail-list-item>
            <detail-list-item term="单位换算定义">{{headContent.unitConversionId_dictText}}</detail-list-item>
            <detail-list-item term="换算主单位">{{headContent.conversionMainUnit_dictText}}</detail-list-item>
            <detail-list-item term="换算辅单位">{{headContent.conversionSubUnit_dictText}}</detail-list-item>
            <detail-list-item term="换算率">{{headContent.conversionRate}}</detail-list-item>
            <detail-list-item term="默认采购单位">{{headContent.buyUnitCode_dictText}}</detail-list-item>
            <detail-list-item term="默认销售单位">{{headContent.saleUnitCode_dictText}}</detail-list-item>
            <detail-list-item term="默认库存单位">{{headContent.stockUnitCode_dictText}}</detail-list-item>
            <detail-list-item term="默认发料单位">{{headContent.issueUnitCode_dictText}}</detail-list-item>
          </detail-list>
          <detail-list title="┃ 系统信息" size="small" :col="3" style="margin-bottom: 10px">
            <detail-list-item term="创建人">{{headContent.createBy}}</detail-list-item>
            <detail-list-item term="创建时间">{{headContent.createTime}}</detail-list-item>
            <detail-list-item term="创建部门">{{headContent.sysOrgCode_dictText}}</detail-list-item>
            <detail-list-item term="更新人">{{headContent.updateBy}}</detail-list-item>
            <detail-list-item term="更新时间">{{headContent.updateTime}}</detail-list-item>
          </detail-list>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="实时库存" v-if="hasPermissionTab('material:materialStockTab')">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <mm-material-stock-table
            ref="materialStockTable"
            :init-query-param="{materialId: this.headContent.id}"
          ></mm-material-stock-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="3" tab="入库单据" v-if="hasPermissionTab('material:stockInTab')">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <mm-stock-in-table
            ref="stockInTable"
            :init-query-param="{materialId: this.headContent.id}"
          ></mm-stock-in-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="4" tab="出库单据" v-if="hasPermissionTab('material:stockOutTab')">
        <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
          <mm-stock-out-table
            ref="stockInTable"
            :init-query-param="{materialId: this.headContent.id}"
          ></mm-stock-out-table>
        </a-card>
      </a-tab-pane>
      <template v-if="headContent.materialTypeCode !== 'FERT' && headContent.materialTypeCode !== 'C'">
        <a-tab-pane key="5" tab="供应商" v-if="hasPermissionTab('material:supplyTab')">
          <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
            <mm-purchase-order-supply-material-table
              ref="purOrderSupplyMaterialTable"
              :init-query-param="{materialId: this.headContent.id}"
            ></mm-purchase-order-supply-material-table>
          </a-card>
        </a-tab-pane>
        <a-tab-pane key="6" tab="采购订单" v-if="hasPermissionTab('material:purOrderTab')">
          <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
            <mm-purchase-order-detail-table
              ref="purOrderDetailTable"
              :init-query-param="{materialId: this.headContent.id}"
            ></mm-purchase-order-detail-table>
          </a-card>
        </a-tab-pane>
      </template>
      <template v-else>
        <a-tab-pane key="7" tab="客户" v-if="hasPermissionTab('material:customerTab')">
          <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
            <sd-sales-order-customer-material-table
              ref="saleOrderCustomerMaterialTable"
              :init-query-param="{materialId: this.headContent.id}"
            ></sd-sales-order-customer-material-table>
          </a-card>
        </a-tab-pane>
        <a-tab-pane key="8" tab="销售订单" v-if="hasPermissionTab('material:saleTab')">
          <a-card :bordered="false" :body-style="{padding: '0px 3px 25px 3px'}" >
            <sd-sales-order-detail-table
              ref="saleOrderDetailTable"
              :init-query-param="{materialId: this.headContent.id}"
            ></sd-sales-order-detail-table>
          </a-card>
        </a-tab-pane>
      </template>
    </a-tabs>
  </page-layout>
</template>

<script>
import {mixinDevice} from '@/utils/mixin.js'
import PageLayout from '@/components/page/PageLayout'
import {deleteAction, getAction, putAction} from "@/api/manage";
import DetailList from "@/components/tools/DetailList";
import {hasPermissionTab} from "@/utils/util";
import MmMaterialStockTable from "@/views/ebc/mm/table/MmMaterialStockTable.vue"
import MmStockInTable from "@/views/ebc/mm/table/MmStockInTable.vue"
import MmStockOutTable from "@/views/ebc/mm/table/MmStockOutTable.vue"
import MmPurchaseOrderSupplyMaterialTable from "@/views/ebc/mm/table/MmPurchaseOrderSupplyMaterialTable.vue"
import MmPurchaseOrderDetailTable from "@/views/ebc/mm/MmPurchaseOrderDetailTable.vue"
import SdSalesOrderCustomerMaterialTable from "@/views/ebc/sd/table/SdSalesOrderCustomerMaterialTable.vue"
import SdSalesOrderDetailTable from "@/views/ebc/sd/table/SdSalesOrderDetailTable.vue"

const DetailListItem = DetailList.Item
export default {
  name: "MdmMaterialDetail",
  components: {
    PageLayout,
    DetailList,
    DetailListItem,
    MmMaterialStockTable,
    MmStockInTable,
    MmStockOutTable,
    MmPurchaseOrderSupplyMaterialTable,
    MmPurchaseOrderDetailTable,
    SdSalesOrderCustomerMaterialTable,
    SdSalesOrderDetailTable
  },
  mixins: [mixinDevice],
  created() {
    this.pcaData = new Area()
  },
  data() {
    return {
      headContent: {},
      defaultActiveKey: '1',
      headContentColumns: [
        {
          title: '物料号',
          dataIndex: 'materialCode',
        },
        {
          title: '名称',
          dataIndex: 'materialName',
        },
        {
          title: '规格',
          dataIndex: 'materialSpec',
        },
        {
          title: '物料分类',
          dataIndex: 'materialClassId_dictText',
        },
      ],
      headExtraColumns: [
        {
          title: '状态',
          dataIndex: 'materialStatusCode_dictText',
        },
      ],
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      labelCol2: {
        xs: {span: 24},
        sm: {span: 3},
      },
      wrapperCol2: {
        xs: {span: 24},
        sm: {span: 20},
      },
      url: {
        list: "/mdm/material/list",
        edit: "/mdm/material/edit",
        delete: "/mdm/material/delete",
      },
      logo: require('@/views/ebc/assets/产品图标.png'),
      pcaData: '',
    }
  },
  methods: {
    edit(record) {
      this.headContent = record;
    },
    handleEdit: function (record) {
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "编辑";
      this.$refs.modalForm.disableSubmit = false;
    },
    handleDelete: function (id) {
      if (!this.url.delete) {
        this.$message.error("请设置url.delete属性!")
        return
      }
      var that = this;
      deleteAction(that.url.delete, {id: id}).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.$emit('detailDel');
        } else {
          that.$message.warning(res.message);
        }
      });
    },
    callback(key) {
    },
    modalFormOk: function () {
      // 刷新详情页
      this.detailFresh();
      // 详情页更新通知
      this.$emit('detailOk');
    },
    detailFresh() {
      let that = this;
      getAction(that.url.list, {id: that.headContent.id}).then((res) => {
        if (res.success) {
          let record = (res.result.records)[0];
          if (record) {
            that.headContent = record;
          }
        } else {
          that.$message.warning(res.message);
        }
      })
    },
    uploadFile(newFileList){
      if(!this.headContent.id){
        this.$message.warning('数据异常，ID不存在')
        return;
      }
      putAction(this.url.edit,{id: this.headContent.id, file: newFileList}).then((res)=>{
        if(res.success){
          this.$message.success("成功！");
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    hasPermissionTab(val){
      return hasPermissionTab(val);
    }
  },
}
</script>

<style lang="less" scoped>
.detail-layout {
  margin-left: 2px;
}

.text {
  color: rgba(0, 0, 0, .45);
  text-align: center;
}

.contentText {
  color: rgba(0, 0, 0, .45);
  font-size: 13px;
}

.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
  text-align: center;
}

.contentHeading {
  color: rgba(0, 0, 0, .85);
  font-size: 14px;
}

.no-data {
  color: rgba(0, 0, 0, .25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.mobile {
  .detail-layout {
    margin-left: unset;
  }

  .text {

  }

  .status-list {
    text-align: left;
  }

  .term {
    color: rgba(0,0,0,.85);
    display: table-cell;
    line-height: 20px;
    margin-right: 8px;
    padding-bottom: 16px;
    white-space: nowrap;

    &:after {
      content: ":";
      margin: 0 8px 0 2px;
      position: relative;
      top: -.5px;
    }
  }

  .content {
    color: rgba(0,0,0,.65);
    display: table-cell;
    line-height: 22px;
    padding-bottom: 16px;
    width: 100%;
  }

}
</style>